<template>
  <div class="line circle">
    <div class="half_circle half_circle_left">
      <div class="half_cover h_c_left"></div>
    </div>
    <div class="half_circle half_circle_right">
      <div class="half_cover h_c_right"></div>
    </div>
    <div class="percent_text_circle">
      <div>
        <span class="big">{{percent}}</span>
        <span class="large-text text-white">%</span>
      </div>
    </div>
    <div class="quarter_circle" v-if="1<2">
      <div class="startDot"></div>
      <div class="endDot"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    start_time: {
      type: String,
      default: "2019-11-25 10:23:11"
    },
    end_time: {
      type: String,
      default: "2020-01-24 10:23:11"
    }
  },
  data() {
    return {
      countTicket: null,
      toUnix: 0,
      fromUnix: 0,
      percent: 0,
      angle: 0
    };
  },
  watch: {},
  computed: {},
  methods: {
    countDown: function() {
      let from = this.start_time.replace(/-/g, "/");
      let to = this.end_time.replace(/-/g, "/");
      this.fromUnix = +new Date(from);
      this.toUnix = +new Date(to);
      this.countTicket = setInterval(() => {
        const { done, percent, countDownDes } = this.calcPercentAndCountDown(
          this.fromUnix,
          this.toUnix
        );
        console.log(
          "done, percent, countDownDes:",
          done,
          percent,
          countDownDes
        );
        this.countDownDes = "倒计时 " + countDownDes;
        this.percent = percent;
        this.updateUI(this.fromUnix, this.toUnix);
        if (done) {
          clearInterval(this.countTicket);
          this.countDownDes = "已完成";
          this.processTip = "合成钻石数量";
          this.angle = 360;
        }
      }, 1000);
    },
    updateUI: function(fromUnix, toUnix) {
      let diffSec = (toUnix - fromUnix) / 1000;
      let leftContent = document.querySelector(".h_c_left");
      let rightContent = document.querySelector(".h_c_right");

      this.angle = (this.percent * 360) / 100;

      if (this.angle >= 360) {
        leftContent.setAttribute("style", "transform: rotate(180deg)");
        rightContent.setAttribute("style", "transform: rotate(180deg)");
        clearInterval(this.countTicket);
      } else {
        if (this.angle > 180) {
          rightContent.setAttribute("style", "transform: rotate(180deg)");
          leftContent.setAttribute(
            "style",
            "transform: rotate(" + (this.angle - 180) + "deg)"
          );
        } else {
          rightContent.setAttribute(
            "style",
            "transform: rotate(" + this.angle + "deg)"
          );
        }
        // this.percent = parseInt((this.angle * 100) / 360);
      }
    }
  },
  created() {},
  mounted() {
    this.$nextTick(function() {
      this.countDown();
    });
  },
  destroyed() {
    clearInterval(this.countTicket);
  }
};
</script>
<style lang="scss" scoped>
$borderWidth: 40px;
.circle {
  position: relative;
  height: 400px;
  width: 400px;
  border-radius: 100%;

  .half_circle {
    position: absolute;
    height: 100%;
    background: #ffc508;
    overflow: hidden;
    border: none;
  }
  .half_circle_right {
    right: 1px;
    width: 200px;
    border-radius: 0 200px 200px 0/0 200px 200px 0;
  }

  .half_circle_right .h_c_right {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: left center;
    transform: rotate(0deg);
    border-radius: 0 200px 200px 0/0 200px 200px 0;
    background: coral;
    box-shadow: 4px 0 4px 0 coral;
  }

  .half_circle_left {
    left: 1px;
    width: 200px;
    border-radius: 200px 0 0 200px/200px 0 0 200px;
  }

  .half_circle_left .h_c_left {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    transform-origin: right center;
    transform: rotate(0deg);
    border-radius: 200px 0 0 200px/200px 0 0 200px;
    background: coral;
    box-shadow: 4px 0 4px 0 coral;
  }

  .percent_text_circle {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
    width: 80%;
    left: 10%;
    top: 10%;
    border-radius: 100%;
    background: #d7d8cb;
    span {
      font-family: PingFangSC-Regular;
    }
    .big {
      color: #fff;
      font-size: 100px;
    }
  }
  .quarter_circle {
    z-index: 10;
    background: transparent;
    position: relative;
    height: 80%;
    width: 80%;
    border: 40px solid transparent;
    border-radius: 50%;
    border-top: 40px solid #fff991;
    transform: rotate(45deg);
    animation: quarterRun linear 1.5s infinite;
    -webkit-animation: quarterRun linear 1.5s infinite;
    .startDot,
    .endDot {
      height: 40px;
      width: 40px;
      background: #fff991;
      position: absolute;
      border-radius: 100%;
    }
    .startDot {
      top: 14px;
      left: 12px;
    }
    .endDot {
      right: 12px;
      top: 14px;
    }
  }
}

@keyframes quarterRun {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes quarterRun /* Safari and Chrome */ {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>